/*
 * 排序按钮
 * @Author: ljb
 * @Date: 2018-09-18 15:47:43
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-19 16:15:17
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-component-sort-btn {
		display: inline-block;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: #666;
        cursor: pointer;
        & > span {
            vertical-align: middle;
            &.btn-name {
                margin-right: 6px;
            }
            &.up-down-icon {
                display: inline-block;
                position: relative;
				height: 20px;
				color: #DCDCDC;
                .up-icon {
                    position: absolute;
                    top: 0;
                    &.highlight {
                        color: #2D8CF0;
                    }
                }
                .down-icon {
                    position: absolute;
                    bottom: 0;
                    &.highlight {
                        color: #2D8CF0;
                    }
                }
            }
        }
    }

</style>
<template>
	<div
		class="v-component-sort-btn"
		@click="changeSort">
		<span class="btn-name">{{ name }}</span>
		<span class="up-down-icon">
			<Icon
				:class="[ sort === 'ASC' ? 'highlight' : '','up-icon']"
				type="arrow-up-b"/>
			<Icon
				:class="[ sort === 'DESC' ? 'highlight' : '','down-icon']"
				type="arrow-down-b"/>
		</span>
	</div>
</template>

<script>
export default {
	name: 'SortBtn',
	props: {
		name: {
			type: String,
			required: true,
		},
		paramKey: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			sort: '',
		};
	},
	methods: {
		/**
         * 改变排序值
         * @return {undefined}
         */
		changeSort() {
			switch (this.sort) {
			case 'DESC':

				this.sort = '';

				break;

			case 'ASC':

				this.sort = 'DESC';

				break;

			default:
				this.sort = 'ASC';
				break;
			}

			const param = {
				key: this.paramKey,
				value: this.sort,
			};

			this.$emit('sort', param);
		},

		/**
		 * 重置排序的参数
		 * @return {undefined}
		 */
		reset() {
			this.sort = '';
		},
	},
};
</script>
